<template>
	<view>
		<nav-bar ref="navBar" type="transparentFixed" bgColor="themeBgColor" fontColor="#FFF" transparentFixedFontColor="#FFF">回放列表
			<view class="nav_right_info" slot="right">
				<!-- #ifdef APP-PLUS -->
				<button class="share" @click="onShare"></button>
				<!-- #endif -->
			</view>
			<view class="nav_right_info" slot="transparentFixedRight">
				<!-- #ifdef APP-PLUS -->
				<button class="share black" @click="onShare"></button>
				<!-- #endif -->
			</view>
		</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="live_info_box" :style="{ 'background-image': 'url('+anchorInfo.headImg+')' }">
			<view class="live_info" :style="{ paddingTop: statusBarHeight + 'px' }">
				<image :src="anchorInfo.headImg" mode="aspectFill"></image>
				<view class="name">{{anchorInfo.name}}</view>
				<text class="fan">粉丝{{anchorInfo.fansNumStr}}</text>
				<button>关注TA</button>
			</view>
		</view>
		<view class="replay_title">精彩回放</view>
        <mescroll-body ref="mescrollRef" height="-300" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="replay_list" v-for="(item,index) in liveHistoryList" :key="index">
                <view class="title_time">
                    <view>{{item.title}}</view>
                    <text>{{item.timeBegin}}</text>
                </view>
                <view class="replay_pageviews">
                    <text>{{item.liveStatusStr}}</text>
                    <view>{{item.numVisitStr}}观看</view>
                </view>
                <view class="live_player_box">
                    <video class="live_player" :id="'live_player' + index" :src="item.payUrl" :index="index" @play="onPlay(index)" controls :title="item.title" @error="onVideoError"></video>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
import { appShare } from '@/config/utils';
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	data() {
		return {
			statusBarHeight: 0,
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			liveHistoryList:[],
			userUid:"",
			anchorInfo:{}
		};
	},
	//第一次加载
	onLoad(e) {
		if(e.userUid){
			this.userUid = e.userUid;
			this.pageData();
		}
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onShare() {
			appShare();
		},
		pageData() {
			this.$http
				.get('api/live/v1/anchor_info', {
					userUid: this.userUid
				})
				.then(res => {
					this.anchorInfo = res;
				});
		},
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
            let httpData = {
                pageNo: pageNo,
                pageSize: 15,
                userUid: this.userUid
            };
            this.$http
            	.post('api/live/v1/live_list_data', httpData,{
            		load:false
            	}).then(res => {
            		uni.stopPullDownRefresh();
            		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
            		res.data.map(item => {
            			item.play = false;
            			return item;
            		});
            		if (pageNo == 1) {
            			this.liveHistoryList = res.data;
            		} else {
            			this.liveHistoryList = this.liveHistoryList.concat(res.data);
            		}
            	}).catch(() => {
            		//联网失败, 结束加载
            		this.mescroll.endErr();
            	});
        },
		onPlay(playIndex){
			let liveHistoryList = this.liveHistoryList;
			liveHistoryList.map((item,index) => {
				if(playIndex == index){
					item.play = true;
				} else if(item.play){
					uni.createVideoContext('live_player' + index,this).pause();
					item.play = false;
				} 
			});
			this.liveHistoryList = liveHistoryList;
		},
		onPause(item,playIndex){
			uni.createVideoContext('live_player' + playIndex,this).pause();
			this.liveHistoryList[playIndex].play = false;
		},
		onVideoError(e){
			Object.keys(e).forEach((item,index) => {
				console.log("视频播放错误",item,e[item]);
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	onPageScroll (e) {
		this.$refs.navBar.pageScroll(e);
	},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.nav_right_info {
	display: flex;
	padding-right: 30rpx;
	.share {
		width: 60rpx;
		height: 60rpx;
		@include bis('../../static/icon/ic_share_white.png', 60% 60%);
		margin-left: 25rpx;
		background-color: transparent;
		border-radius: 50%;

		&.black {
			background-image: url('../../static/icon/ic_share_white.png');
			background-color: rgba($color: #000000, $alpha: 0.2);
		}
	}
}
.live_info_box {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	.live_info {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 80rpx;
		image {
			margin-top: 120rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.name {
			font-size: 32rpx;
			color: #ffffff;
			margin-top: 24rpx;
		}
		.fan {
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #ffffff;
		}
		button {
			width: 126rpx;
			height: 47rpx;
			@include theme("gradient_bg");
			border-radius: 24rpx;
			margin-top: 32rpx;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 47rpx;
		}
	}
}
.replay_title {
	padding: 30rpx;
	background-color: #FFF;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #333333;
	&::before {
		content: "";
		width: 36rpx;
		height: 36rpx;
		@include bis("../../static/icon/live/ic_playback.png");
		margin-right: 12rpx;
	}
}
.replay_list {
	background-color: #FFF;
	padding: 30rpx;
	.title_time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			font-size: 28rpx;
			color: #333333;
		}
		text {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.replay_pageviews {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		text {
			height: 38rpx;
			background-color: #6d82aa;
			border-radius: 8rpx;
			line-height: 38rpx;
			padding: 0 15rpx;
			font-size: 24rpx;
			color: #ffffff;
		}
		view {
			font-size: 24rpx;
			color: #999999;
			margin-left: 12rpx;
		}
	}
	.live_player_box {
		width: 100%;
		height: 460rpx;
		position: relative;
		.live_player {
			margin-top: 30rpx;
			width: 100%;
			height: 460rpx;
		}
	}
}
</style>
